<!--
	作者：ZhangXin
	时间：2020-07-23
	描述：修改密码页面
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments::head(~{::title})">
    <title>修改密码</title>
</head>

<body>
<!--导航-->
<nav th:replace="fragments::menu(0)"></nav>

<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/personal}" class=" item">个人信息</a>
            <a href="#" th:href="@{/updatepassword}" class="active teal item">修改密码</a>
        </div>
    </div>

</div>

<!--中间内容-->
<div class="m-container-mini m-padded-tb-big " style="max-width: 50em ;height: 600px;!important;">
    <div class="ui container">
        <div class="ui success message" th:unless="${#strings.isEmpty(successMessage)}">
            <i class="close icon"></i>
            <div class="" th:text="${successMessage}">提示：操作成功！</div>
        </div>
        <div class="ui negative message" th:unless="${#strings.isEmpty(errorMessage)}">
            <i class="close icon"></i>
            <div class="" th:text="${errorMessage}">提示：操作失败！</div>
        </div>
        <form class="ui large form" method="post" action="#" th:action="@{/updatepassword}">
            <input type="hidden" name="id" th:value="${user.id}">
            <div class="ui  segment">
                <div class="two inline fields" style="padding-left: 20%;padding-right: 20%;padding-top: 2em;">
                    <div class="two wide field">
                        <label>用户名:</label>
                    </div>
                    <div class="fourteen wide field">
                        <input type="text" name="username" readonly th:value="${user.username}">
                    </div>
                </div>
                <div class="two inline fields" style="padding-left: 20%;padding-right: 20%">
                    <div class="two wide field">
                        <label>邮箱:</label>
                    </div>
                    <div class="fourteen wide field">
                        <input type="text" name="email" readonly th:value="${user.email}">
                    </div>
                </div>
                <div class="two inline fields" style="padding-left: 20%;padding-right: 20%">
                    <div class="two wide field">
                        <label>旧密码:</label>
                    </div>
                    <div class="fourteen wide field">
                        <input type="password" name="oldpassword" >
                    </div>
                </div>
                <div class="two inline fields" style="padding-left: 20%;padding-right: 20%">
                    <div class="two wide field">
                        <label>新密码:</label>
                    </div>
                    <div class="fourteen wide field">
                        <input type="password" name="newpassword" >
                    </div>
                </div>
                <div class="two inline fields" style="padding-left: 20%;padding-right: 20%">
                    <div class="two wide field">
                        <label>确认密码:</label>
                    </div>
                    <div class="fourteen wide field">
                        <input type="password" name="confirmpassword" >
                    </div>
                </div>
                <br>
				<div class="ui center aligned container">
					<button  class="ui teal button">提交</button>
					<button type="button" class="ui secondary button" onclick="window.history.go(-1)">返回</button>
				</div>
            </div>

            <div class="ui error mini message"></div>

        </form>
    </div>
</div>

<!--底部内容-->
<footer th:replace="fragments::footer"></footer>
<script th:replace="fragments::script"></script>
<script>

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    })

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-show');

    });

    //下拉列表
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    //表单验证
    $('.ui.form').form({
        fields: {
            oldpassword: {
                identifier: 'oldpassword',
                rules: [{
                    type: 'empty',
                    prompt: '旧密码不能为空！'
                }]
            },
            newpassword: {
                identifier: 'newpassword',
                rules: [{
                    type: 'empty',
                    prompt: '新密码不能为空！'
                }]
            },
            confirmpassword: {
                identifier: 'confirmpassword',
                rules: [{
                    type: 'empty',
                    prompt: '确认密码密码不能为空！'
                }]
            }
        }
    });



</script>
</body>

</html>